<template>
  <Spin :spinning="loading.state.value">
    <Form
      ref="formRef"
      class="form-card"
      :colon="false"
      :scrollToFirstError="true"
      :model="form"
      :labelCol="{ span: 4 }"
      :wrapperCol="{ span: 12 }"
      :rules="rules"
    >
      <FormItem label=" ">
        <Card size="small">
          <Statistic :value="form.meta.likes" suffix="次">
            <template #suffix>
              <HeartOutlined />
            </template>
            <template #title>
              <Space size="small">
                站点累计被喜欢
                <HeartOutlined />
              </Space>
            </template>
          </Statistic>
        </Card>
      </FormItem>
      <FormItem name="title" label="站点标题" :required="true">
        <Input v-model:value="form.title" placeholder="站点标题"></Input>
      </FormItem>
      <FormItem name="sub_title" label="副标题" :required="true">
        <Input v-model:value="form.sub_title" placeholder="副标题"></Input>
      </FormItem>
      <FormItem name="description" label="站点描述" :required="true">
        <Textarea v-model:value="form.description" :rows="4" placeholder="站点描述"></Textarea>
      </FormItem>
      <FormItem name="keywords" label="关键词">
        <Select v-model:value="form.keywords" placeholder="输入关键词后回车" mode="tags" />
      </FormItem>
      <FormItem name="site_url" label="站点地址" :required="true">
        <Input v-model:value="form.site_url" placeholder="站点地址">
          <template #suffix>
            <LinkOutlined />
          </template>
        </Input>
      </FormItem>
      <FormItem name="site_email" label="电子邮件" :required="true">
        <Input v-model:value="form.site_email" placeholder="example@xxx.me">
          <template #suffix>
            <MailOutlined />
          </template>
        </Input>
      </FormItem>
      <FormItem name="site_icp" label="ICP备案号" :required="true">
        <Input v-model:value="form.site_icp" placeholder="鄂 ICP 备000000号"></Input>
      </FormItem>
      <FormItem :name="['blocklist', 'ips']" label="黑名单 IP" extra="这些 IP 来源的评论将被拒绝">
        <Select
          v-model:value="form.blocklist.ips"
          placeholder="回车以输入多个 IP 地址"
          mode="tags"
        />
      </FormItem>
      <FormItem
        :name="['blocklist', 'mails']"
        label="黑名单 邮箱"
        extra="这些邮箱来源的评论将被拒绝"
      >
        <Select v-model:value="form.blocklist.mails" placeholder="回车以输入多个邮箱" mode="tags" />
      </FormItem>
      <FormItem
        :name="['blocklist', 'keywords']"
        label="黑名单 关键字"
        extra="包含这些关键字的的评论将被拒绝"
      >
        <Select
          v-model:value="form.blocklist.keywords"
          placeholder="回车以输入多个关键字"
          mode="tags"
        />
      </FormItem>
      <FormItem name="ad_config" label="广告配置">
        <Textarea v-model:value="form.ad_config" :rows="4" placeholder="广告配置"></Textarea>
      </FormItem>
      <FormItem label="好友链接">
        <FormDataKeyValue v-model:value="form.friend_links" />
      </FormItem>
      <FormItem label=" ">
        <Button type="primary" @click="handleSubmit">
          <template #icon>
            <CheckOutlined />
          </template>
          保存
        </Button>
      </FormItem>
    </Form>
  </Spin>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { HeartOutlined, LinkOutlined, MailOutlined, CheckOutlined } from '@ant-design/icons-vue'
import FormDataKeyValue from '@/components/FormDataKeyValue/index.vue'
import { useLoading } from '@/handcer'
import type { Option } from '@/constants/option'
import { formatJSONString } from '@/transformers/json'
import { getOption, putOption } from '@/store/system'
import {
  Button,
  Card,
  Form,
  FormItem,
  Input,
  Select,
  Space,
  Spin,
  Statistic,
  Textarea,
} from 'ant-design-vue'
import { Rule } from 'ant-design-vue/lib/form'
// import { scrollTo } from '@/services/scroller'

const loading = useLoading()

const formRef = ref()

const form = reactive<Option>({
  title: '',
  sub_title: '',
  description: '',
  keywords: [],
  site_url: '',
  site_email: '',
  site_icp: '',
  blocklist: {
    ips: [],
    mails: [],
    keywords: [],
  },
  meta: {
    likes: 0,
  },
  friend_links: [],
  ad_config: '',
  update_at: '',
})

const rules: Record<string, Rule[]> = {
  site_url: [
    {
      message: '请输入',
      required: true,
    },
    {
      message: '请输入正确的 URL',
      type: 'url',
    },
  ],
  site_email: [
    {
      message: '请输入',
      required: true,
    },
    {
      message: '请输入正确的邮箱地址',
      type: 'email',
    },
  ],
}

const resetDataForm = (option: Option) => {
  form.title = option.title
  form.sub_title = option.sub_title
  form.description = option.description
  form.keywords = option.keywords
  form.site_url = option.site_url
  form.site_email = option.site_email
  form.site_icp = option.site_icp
  form.blocklist = option.blocklist
  form.friend_links = option.friend_links
  form.meta = option.meta
  form.ad_config = option.ad_config
  form.update_at = option.update_at
}

const fetchOption = () => {
  return getOption().then(resetDataForm)
}

const updateOption = (newOption: Option) => {
  return putOption({
    ...newOption,
    ad_config: formatJSONString(newOption.ad_config),
  }).then(resetDataForm)
}

const handleSubmit = () => {
  formRef.value.validate().then(() => {
    loading
      .promise(
        updateOption({
          ...form,
        })
      )
      .then(() => {
        // scrollTo(document.body)
      })
  })
}

onMounted(() => {
  loading.promise(fetchOption())
})
</script>
<style lang="less" scoped>
.form-card {
  .friend-links {
    max-height: 200px;
    margin-top: 20px;
    overflow-y: auto;
  }
}
</style>
